<template>
  <el-card class="box-card" v-show="show_task">
    <template #header>
      <div class="card-header">
        <span>作业</span>
        <el-button v-if="$store.state.user.is_teacher" type="primary" round @click="handleCreateTask">添加作业</el-button>
      </div>
    </template>
    <TaskCardList ref="homeworkComponent" :course_id="course_id" task_type="homework" />
    <div class="box">

    </div>
  </el-card>
  <el-card class="box-card" v-show="show_task">
    <template #header>
      <div class="card-header">
        <span>实验</span>
        <el-button v-if="$store.state.user.is_teacher" type="primary" round
          @click="handleCreateExperiment">添加实验</el-button>
      </div>
    </template>
    <TaskCardList ref="experimentComponent" :course_id="course_id" task_type="experiment" />

    <div class="box">
      <div class="item">
      </div>
    </div>
  </el-card>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>考试</span>
        <el-button v-if="$store.state.user.is_teacher" type="primary" round @click="handleCreateExam">添加考试</el-button>
      </div>
    </template>
    <TaskCardList ref="examComponent" :course_id="course_id" task_type="exam" />

    <div class="box">
      <div class="item">
      </div>
    </div>
  </el-card>
</template>


<script lang="ts" setup>
import { onMounted, watch, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import TaskCardList from './taskCardList.vue'
const store = useStore()
const props = defineProps({ course_id: { type: Number, required: true } })
const homeworkComponent = ref(null)
const experimentComponent = ref(null)
const examComponent = ref(null)


const router = useRouter()
const handleCreateExam = () => {
  router.push({
    name: 'createTask',
    state: {
      course_id: props.course_id,
      task_type: 'exam'
    }
  })
}

const handleCreateTask = () => {
  router.push({
    name: 'createTask',
    state: {
      course_id: props.course_id,
      task_type: 'homework'
    }
  })
};

const handleCreateExperiment = () => {
  router.push({
    name: 'createTask',
    state: {
      course_id: props.course_id,
      task_type: 'experiment'
    }
  })
}
const show_task = ref(true)
onMounted(() => {
  examComponent.value.getListData(true).then((res: any) => {
    console.log("father res: ",res)
    if (res === true && !store.state.user.is_teacher) {
      show_task.value = false
    } else {
      show_task.value = true
      homeworkComponent.value.getListData(true)
      experimentComponent.value.getListData(true)
    }
  })

})



</script>

<style lang="scss" scoped>
.box-card {
  margin-top: 10px;

  .card-header {
    text-align: left;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .box {


    .item {
      display: flex;
      align-items: center;

      * {
        margin-right: 20px;
      }
    }
  }
}
</style>